<template>
  <a-modal
    title="添加公司法人银行卡号"
    :visible.sync="visible"
    @ok="handleSubmit"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <div class="content">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item v-bind="formItemLayout" label="企业账号">
          <a-input
            size="large"
            placeholder="请输入企业银行账号"
            v-decorator="[
              'bank_num',
              { rules: [{ required: true, message: '请输入企业账号' }] }
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="开户行">
          <a-select
            size="large"
            placeholder="请选择开户行"
            v-decorator="[
              'bank_name',
              { rules: [{ required: true, message: '请选择开户行' }] }
            ]"
          >
            <a-select-option
              v-for="(item, index) in bankList"
              :key="index"
              :value="item.name"
            >
              <span style="display: inline-block;width: 30px;">
                <img
                  width="20px"
                  :src="item.img"
                  alt=""
                  style="vertical-align: middle"
                />
              </span>
              {{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="手机号">
          <a-input
            size="large"
            placeholder="请输入银行预留手机号"
            v-decorator="[
              'bank_mobile',
              {
                rules: [
                  { required: true, message: '请输入银行预留手机号' },
                  { validator: validatePhone }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="14">
              <a-input
                size="large"
                placeholder="图片验证码"
                autocomplete="off"
                v-decorator="[
                  'code',
                  {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '请输入验证码'
                      }
                    ]
                  }
                ]"
              />
            </a-col>
            <a-col :span="10">
              <a-button size="large" block @click="getCode" v-if="!isShowTimer"
                >获取验证码</a-button
              >
              <span v-else class="count-wrapper">{{ count }}s</span>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
import { Row, Col } from "ant-design-vue";
import bankList from "@/lib/bank";
export default {
  components: {
    aRow: Row,
    aCol: Col
  },
  name: "index",
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bankList,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      timer: null,
      isShowTimer: false,
      count: 60
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    validatePhone(rule, value, callback) {
      let cP = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      if (value && !cP.test(value)) {
        callback("手机格式不正确");
      } else {
        callback();
      }
    },
    handleCancel() {
      this.$emit("close");
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$ajax
            .post(this.$api.addCard, {
              code: values.code
            })
            .then(() => {
              this.$message.success("新增成功");
              this.$emit("submit", values);
            })
            .catch(err => {
              this.isShowTimer = false;
              this.$message.error(err);
            });
        }
      });
    },
    handleReset() {
      this.form.resetFields();
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.form.validateFieldsAndScroll(
        ["bank_num", "bank_mobile", "bank_name"],
        (err, values) => {
          if (!err) {
            this.$ajax
              .post(this.$api.getCardCode, values)
              .then(res => {
                this.$message.success(res.msg);
                this.isShowTimer = true;
                this.timer = setInterval(() => {
                  this.count--;
                  if (this.count === 0) {
                    this.isShowTimer = false;
                    clearInterval(this.timer);
                    this.count = 60;
                  }
                }, 1000);
              })
              .catch(err => {
                this.isShowTimer = false;
                this.$message.error(err);
              });
          }
        }
      );
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
  // watch: {
  //     formModalInfo: {
  //         handler() {
  //             Object.assign(
  //                 this.currentData,
  //                 JSON.parse(JSON.stringify(this.formModalInfo))
  //             );
  //         },
  //         deep: true,
  //         immediate: true
  //     }
  // }
};
</script>

<style scoped lang="less">
.content {
  padding: 10px;
}
</style>
